Micron Document
baubs git

Node / mirrors / respira / commits / 45c3f2e

Commit 45c3f2ee07d314f32ebf6fe776d8c63d29b854be

󰉖 Browse tree at this commit

Parents : 8ee7d0c
Author : Jan-Henrik Bruhn <hi@jhbruhn.de>
Date : 2025-12-07T13:52:08+01:00

Add dark mode support to skeleton loaders

Update all skeleton components to properly support dark mode with appropriate color variants for backgrounds, borders, and gradients.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Changes

1 files changed, 9 insertions(+), 9 deletions(-)

M src/components/SkeletonLoader.tsx +9 -9

Diff

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 13ffd5c..73b4f4d 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -4,7 +4,7 @@ interface SkeletonLoaderProps {
}
export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoaderProps) {
- const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%]';
+ const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]';
const variantClasses = {
text: 'h-4 rounded',
@@ -19,17 +19,17 @@ export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoa
export function PatternCanvasSkeleton() {
return (
- <div className="bg-white p-6 rounded-lg shadow-md">
- <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300">
+ <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+ <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
<SkeletonLoader className="h-7 w-40" variant="text" />
</div>
- <div className="relative w-full h-[600px] border border-gray-300 rounded bg-gray-50 overflow-hidden">
+ <div className="relative w-full h-[600px] border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-900 overflow-hidden">
<div className="flex items-center justify-center h-full">
<div className="text-center space-y-4">
<div className="relative w-24 h-24 mx-auto">
<SkeletonLoader className="w-24 h-24" variant="circle" />
<div className="absolute inset-0 flex items-center justify-center">
- <svg className="w-12 h-12 text-gray-400 animate-spin" fill="none" viewBox="0 0 24 24">
+ <svg className="w-12 h-12 text-gray-400 dark:text-gray-500 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@@ -50,7 +50,7 @@ export function PatternInfoSkeleton() {
return (
<div className="mt-4">
<SkeletonLoader className="h-6 w-40 mb-4" variant="text" />
- <div className="bg-gray-50 p-4 rounded-lg space-y-3">
+ <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg space-y-3">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="flex justify-between">
<SkeletonLoader className="h-4 w-24" variant="text" />
@@ -64,8 +64,8 @@ export function PatternInfoSkeleton() {
export function MachineConnectionSkeleton() {
return (
- <div className="bg-white p-6 rounded-lg shadow-md">
- <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300">
+ <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+ <div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
<SkeletonLoader className="h-7 w-48" variant="text" />
</div>
<div className="space-y-4">
@@ -73,7 +73,7 @@ export function MachineConnectionSkeleton() {
<SkeletonLoader className="h-4 w-16" variant="text" />
<SkeletonLoader className="h-8 w-32 rounded-lg" />
</div>
- <div className="bg-gray-50 p-4 rounded-lg space-y-2">
+ <div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg space-y-2">
<div className="flex justify-between">
<SkeletonLoader className="h-4 w-20" variant="text" />
<SkeletonLoader className="h-4 w-24" variant="text" />

Served by rngit 1.3.3 - Generated in 0.07s